<template>
  <div>
    <!-- 
      过滤器filter
      作用：处理数据返回新数据

      过滤器传参语法：
        变量 | 过滤器名字(值)
      
      多个过滤器一起使用：
        变量|过滤器名1 | 过滤器名1 | ......
      
      注意：过滤器只能使用在插值表达式和v-bind动态属性里
     -->
    <h1>{{ msg | reverseStr(",") | toUp }}</h1>
    <h2 :title="msg | toUp">测试过滤器，设置title属性</h2>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "hello world!",
    };
  },
  filters: {
    // 字符串翻转
    reverseStr: (val, str) => {
      return val.split("").reverse().join(str);
    },
  },
};
</script>

<style>
</style>